// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied.  See the License for the
// specific language governing permissions and limitations
// under the License.

<template>
  <a-affix :offsetTop="this.$store.getters.shutdownTriggered ? 103 : 78">
    <a-card class="breadcrumb-card">
      <a-row>
        <a-col
          :span="device === 'mobile' ? 24 : 12"
          style="padding-left: 12px; margin-top: 10px"
        >
          <breadcrumb :resource="resource">
            <template #end>
              <a-tooltip placement="bottom">
                <template #title>{{ $t('label.refresh') }}</template>
                <a-button
                  style="margin-top: 4px"
                  :loading="serverMetricsLoading"
                  shape="round"
                  size="small"
                  @click="fetchData(); listUsageRecords()"
                >
                  <template #icon>
                    <ReloadOutlined />
                  </template>
                  {{ $t('label.refresh') }}
                </a-button>
              </a-tooltip>
            </template>
          </breadcrumb>
        </a-col>
        <a-col
          :span="device === 'mobile' ? 24 : 12"
          :style="device === 'mobile' ? { float: 'right', 'margin-top': '12px', 'margin-bottom': '-6px', display: 'table' } : { float: 'right', display: 'table', 'margin-top': '6px' }"
        >
          <a-row justify="end">
            <a-col>
              <tooltip-button
                v-if="'generateUsageRecords' in $store.getters.apis"
                type="primary"
                icon="hdd-outlined"
                :tooltip="$t('label.usage.records.generate')"
                @onClick="generateModal = true"
              />
            </a-col>&nbsp;&nbsp;
            <a-col>
              <tooltip-button
                v-if="'removeRawUsageRecords' in $store.getters.apis"
                type="danger"
                icon="delete-outlined"
                :tooltip="$t('label.usage.records.purge')"
                @onClick="() => purgeModal = true"
              />
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-card>
  </a-affix>
  <a-col>
    <a-card size="small" :loading="serverMetricsLoading" v-if="'listUsageServerMetrics' in $store.getters.apis">
      <a-row justify="space-around">
        <a-card-grid style="width: 30%; text-align: center; font-size: small;">
          <a-statistic
            :title="$t('label.server')"
            :value="serverStats.hostname"
            valueStyle="font-size: medium"
          >
            <template #prefix>
              <status :text="serverStats.state || ''" />
            </template>
          </a-statistic>
        </a-card-grid>
        <a-card-grid style="width: 35%; text-align: center; font-size: small;">
          <a-statistic
            :title="$t('label.lastheartbeat')"
            :value="serverStats.lastheartbeat ? $toLocaleDate(serverStats.lastheartbeat) : $t('label.never')"
            valueStyle="font-size: medium"
          />
          <a-card-meta v-if="!!serverStats.lastheartbeat" :description="getTimeSince(serverStats.collectiontime)" />
        </a-card-grid>
        <a-card-grid style="width: 35%; text-align: center; font-size: small;">
          <a-statistic
            :title="$t('label.lastsuccessfuljob')"
            :value="$toLocaleDate(serverStats.lastsuccessfuljob)"
            valueStyle="font-size: medium"
          />
          <a-card-meta :description="getTimeSince(serverStats.lastsuccessfuljob)" />
        </a-card-grid>
      </a-row>
    </a-card>
  </a-col>
  <a-row justify="space-between">
    <a-col :span="24">
      <a-card>
        <a-form
          :ref="formRef"
          :model="form"
          :rules="rules"
          layout="inline"
          @finish="handleSearch"
        >
          <a-col :span="4">
            <a-row>
              <a-col :span="24">
                <a-form-item
                  ref="domain"
                  name="domain"
                >
                  <a-auto-complete
                    v-model:value="form.domain"
                    :options="domains"
                    :placeholder="$t('label.domain')"
                    :filter-option="filterOption"
                    style="width: 100%;"
                    @select="getAccounts"
                    :dropdownMatchSelectWidth="false"
                  />
                </a-form-item>
              </a-col>
            </a-row>&nbsp;
            <a-row>
              <a-col :span="24">
                <a-form-item
                  ref="isRecursive"
                  name="isRecursive"
                >
                  <a-checkbox v-model:checked="form.isRecursive">{{ $t('label.usage.records.fetch.child.domains')
                  }}</a-checkbox>
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="3">
            <a-form-item
              ref="account"
              name="account"
            >
            <a-auto-complete
                v-model:value="form.account"
                :options="accounts"
                :placeholder="$t('label.account')"
                :filter-option="filterOption"
                :disabled="form.isRecursive"
                :dropdownMatchSelectWidth="false"
                @select="selectAccount"
              />
            </a-form-item>
          </a-col>
          <a-col :span="3" v-if="'listUsageTypes' in $store.getters.apis">
            <a-form-item
              ref="type"
              name="type"
            >
              <a-select
                v-model:value="form.type"
                :options="usageTypes"
                :placeholder="$t('label.usagetype')"
                :filterOption="filterOption"
                @select="selectUsageType"
              />
            </a-form-item>
          </a-col>
          <a-col :span="3" v-if="'listUsageTypes' in $store.getters.apis">
            <a-form-item
              ref="id"
              name="id"
            >
              <a-input
                v-model:value="form.id"
                :placeholder="$t('label.resourceid')"
                :allowClear="true"
                @change="handleResourceIdChange"
              />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item
              ref="dateRange"
              name="dateRange"
            >
              <a-range-picker
                :ranges="rangePresets"
                v-model:value="form.dateRange"
                :disabled-date="disabledDate"
              />
            </a-form-item>
          </a-col>
          <a-col>
            <a-row justify="space-between">
              <a-form-item>
                <a-button
                  type="primary"
                  html-type="submit"
                  @click="handleSearch"
                  :loading="loading"
                >
                  <search-outlined />
                  {{ $t('label.show.usage.records') }}
                </a-button>
              </a-form-item>
              <a-form-item>
                <a-button
                  type="primary"
                  @click="downloadRecords"
                  :loading="loading"
                >
                  <download-outlined />
                  {{ $t('label.download.csv') }}
                </a-button>
              </a-form-item>
              <a-form-item>
                <a-button @click="clearFilters">
                  {{ $t('label.clear') }}
                </a-button>
              </a-form-item>
            </a-row>
          </a-col>
        </a-form>
      </a-card>
    </a-col>
  </a-row>
  <a-row justify="space-around">
    <a-col :span="24">
      <list-view
        :loading="tableLoading"
        :columns="columns"
        :items="usageRecords"
        :columnKeys="columnKeys"
        :selectedColumns="selectedColumnKeys"
        ref="listview"
        @update-selected-columns="updateSelectedColumns"
        @view-usage-record="viewUsageRecord"
        @refresh="this.fetchData"
      />
      <a-pagination
        :current="page"
        :pageSize="pageSize"
        :total="totalUsageRecords"
        :showTotal="total => `${$t('label.showing')} ${Math.min(total, 1 + ((page - 1) * pageSize))}-${Math.min(page * pageSize, total)} ${$t('label.of')} ${total} ${$t('label.items')}`"
        :pageSizeOptions="['20', '50', '100']"
        @change="handleTableChange"
        :showSizeChanger="true"
        :showQuickJumper="true"
      >
      </a-pagination>
    </a-col>
  </a-row>

  <a-modal
    :title="$t('label.usage.records.generate')"
    :cancelText="$t('label.cancel')"
    :closable="true"
    :maskClosable="true"
    :destroyOnClose="true"
    :visible="generateModal"
    @ok="generateUsageRecords"
    @cancel="generateModal = false"
  >
    <a-alert
      :message="$t('label.usage.records.generate.description')"
      type="info"
      show-icon
    >
    </a-alert>
    <br/>
    {{ $t('label.usage.records.generate.after') + $toLocaleDate(serverStats.lastsuccessfuljob) }}
  </a-modal>

  <a-modal
    :title="$t('label.usage.records.purge')"
    :visible="purgeModal"
    :okText="$t('label.usage.records.purge')"
    :okButtonProps="{ type: 'danger' }"
    :cancelText="$t('label.cancel')"
    :closable="true"
    :maskClosable="true"
    :destroyOnClose="true"
    @ok="purgeUsageRecords"
    @cancel="purgeModal = false"
  >
    <a-row>
      <a-alert
        :description="$t('label.usage.records.purge.alert')"
        type="error"
        show-icon
      />

    </a-row>
    <br />
    <a-row justify="space-between">
      <tooltip-label
        bold
        :title="$t('label.usage.records.purge.days')"
        :tooltip="$t('label.usage.records.purge.days.description')"
      />
      <a-input-number
        :min="0"
        v-model:value="purgeDays"
        style="width: 128px;"
      >
        <template #addonAfter>{{ $t('label.days') }}</template>
      </a-input-number>
    </a-row>
  </a-modal>
  <a-modal
    :title="$t('label.usage.records.downloading')"
    :visible="downloadModal"
    :closable="false"
    :maskClosable="false"
    :destroyOnClose="true"
    :footer="null"
  >
    <a-progress
      :percent="downloadPercent"
      :status="downloadStatus"
    />
    <a-spin size="small" /> {{ [$t('label.fetched'), downloadedRecords, $t('label.of'), downloadTotalRecords,
    $t('label.items')].join(' ') }}
  </a-modal>
  <a-modal
    :visible="viewModal"
    :cancelText="$t('label.close')"
    :closable="true"
    :maskClosable="true"
    :okButtonProps="{ style: { display: 'none' } }"
    :destroyOnClose="true"
    width="50%"
    @cancel="viewModal = false"
  >
    <pre style="text-align: start; white-space: break-spaces;">{{ JSON.stringify(recordView, null, 2) }}</pre>
  </a-modal>
</template>

<script>
import { ref, reactive, toRaw } from 'vue'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import utc from 'dayjs/plugin/utc'
import { getAPI, postAPI } from '@/api'
import { toCsv } from '@/utils/util.js'
import { mixinForm } from '@/utils/mixin'

import Breadcrumb from '@/components/widgets/Breadcrumb'
import ChartCard from '@/components/widgets/ChartCard'
import ListView from '@/components/view/ListView'
import TooltipLabel from '@/components/widgets/TooltipLabel'
import TooltipButton from '@/components/widgets/TooltipButton'
import Status from '@/components/widgets/Status'

dayjs.extend(relativeTime)
dayjs.extend(utc)

export default {
  name: 'UsageRecords',
  mixins: [mixinForm],
  components: {
    Breadcrumb,
    ChartCard,
    ListView,
    Status,
    TooltipLabel,
    TooltipButton
  },
  props: {
    resource: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    var selectedColumnKeys = ['account', 'domain', 'usageType', 'usageid', 'startdate', 'enddate', 'rawusage', 'description']
    return {
      serverMetricsLoading: true,
      serverStats: {},
      loading: false,
      tableLoading: false,
      usageRecords: [],
      totalUsageRecords: 0,
      columnKeys: [...selectedColumnKeys,
        'zone', 'virtualmachinename', 'cpunumber', 'cpuspeed', 'memory', 'project', 'templateid', 'offeringid', 'size', 'type', 'vpcname'
      ],
      selectedColumnKeys: selectedColumnKeys,
      selectedColumns: [],
      columns: [],
      page: 1,
      pageSize: 20,
      usageTypes: [],
      domains: [],
      accounts: [],
      account: null,
      domain: null,
      usageType: null,
      usageTypeMap: {},
      usageRecordKeys: {},
      generateModal: false,
      downloadModal: false,
      viewModal: false,
      purgeModal: false,
      purgeDays: ref(365),
      downloadPercent: 0,
      downloadedRecords: 0,
      downloadTotalRecords: 0,
      downloadStatus: 'active',
      rangePresets: {},
      recordView: {}
    }
  },
  beforeCreate () {
    this.apiParams = this.$getApiParams('listUsageRecords')
  },
  created () {
    this.rangePresets[this.$t('label.range.today')] = [dayjs(), dayjs()]
    this.rangePresets[this.$t('label.range.yesterday')] = [dayjs().add(-1, 'd'), dayjs().add(-1, 'd')]
    this.rangePresets[this.$t('label.range.last.1week')] = [dayjs().add(-1, 'w'), dayjs()]
    this.rangePresets[this.$t('label.range.last.2week')] = [dayjs().add(-2, 'w'), dayjs()]
    this.rangePresets[this.$t('label.range.last.1month')] = [dayjs().add(-1, 'M'), dayjs()]
    this.rangePresets[this.$t('label.range.last.3month')] = [dayjs().add(-90, 'M'), dayjs()]
    this.initForm()
    this.fetchData()
    this.updateColumns()
  },
  methods: {
    clearFilters () {
      this.formRef.value.resetFields()
      this.rules.type = {}
      this.domain = null
      this.account = null
      this.usageType = null
      this.page = 1
      this.pageSize = 20

      this.getAccounts()
    },
    disabledDate (current) {
      return current && current > dayjs().endOf('day')
    },
    filterOption (input, option) {
      return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0
    },
    initForm () {
      this.formRef = ref()
      this.form = reactive({
        domain: null,
        account: null,
        type: null,
        id: null,
        dateRange: [],
        isRecursive: false
      })
      this.rules = reactive({
        dateRange: [{ type: 'array', required: true, message: this.$t('label.required') }],
        type: { type: 'string', required: false, message: this.$t('label.usage.records.usagetype.required') }
      })
    },
    fetchData () {
      this.listUsageServerMetrics()
      this.getUsageTypes()
      this.getAllUsageRecordColumns()
      this.getDomains()
      this.getAccounts()
      if (!this.$store.getters.customColumns[this.$store.getters.userInfo.id]) {
        this.$store.getters.customColumns[this.$store.getters.userInfo.id] = {}
        this.$store.getters.customColumns[this.$store.getters.userInfo.id][this.$route.path] = this.selectedColumnKeys
      } else {
        this.selectedColumnKeys = this.$store.getters.customColumns[this.$store.getters.userInfo.id][this.$route.path] || this.selectedColumnKeys
        this.updateSelectedColumns()
      }
      this.updateSelectedColumns()
    },
    viewUsageRecord (record) {
      this.viewModal = true
      this.recordView = record
    },
    handleResourceIdChange () {
      this.rules.type.required = this.form.id && this.form.id.trim()
    },
    handleTableChange (page, pageSize) {
      if (this.pageSize !== pageSize) {
        page = 1
      }
      if (this.page !== page || this.pageSize !== pageSize) {
        this.page = page
        this.pageSize = pageSize
        this.listUsageRecords()
        document.documentElement.scrollIntoView()
      }
    },
    listUsageServerMetrics () {
      if (!('listUsageServerMetrics' in this.$store.getters.apis)) {
        this.serverMetricsLoading = false
        return
      }

      this.serverMetricsLoading = true
      getAPI('listUsageServerMetrics').then(json => {
        this.stats = []
        if (json && json.listusageservermetricsresponse && json.listusageservermetricsresponse.usageMetrics) {
          this.serverStats = json.listusageservermetricsresponse.usageMetrics
        }
      }).finally(f => {
        this.serverMetricsLoading = false
      })
    },
    handleSearch () {
      if (this.loading) return
      this.formRef.value.clearValidate()
      this.formRef.value.validate().then(() => {
        this.page = 1
        this.listUsageRecords()
      }).catch(error => {
        this.formRef.value.scrollToField(error.errorFields[0].name)
      })
    },
    selectAccount (value, option) {
      if (option && option.id) {
        this.account = option
      } else {
        this.account = null
        if (this.formRef?.value) {
          this.formRef.value.resetFields('account')
        }
      }
    },
    selectUsageType (value, option) {
      if (option && option.id) {
        this.usageType = option
      } else {
        this.usageType = null
        if (this.formRef?.value) {
          this.formRef.value.resetFields('type')
        }
      }
    },
    getDomains () {
      getAPI('listDomains', { listAll: true }).then(json => {
        if (json && json.listdomainsresponse && json.listdomainsresponse.domain) {
          this.domains = [{ id: null, value: '' }, ...json.listdomainsresponse.domain.map(x => {
            return {
              id: x.id,
              value: x.path
            }
          })]
        }
      })
    },
    getAccounts (value, option) {
      var params = {
        listAll: true
      }
      if (option && option.id) {
        params.domainid = option.id
        this.domain = option
      } else {
        this.domain = null
        if (this.formRef?.value) {
          this.formRef.value.resetFields('domain')
        }
      }
      getAPI('listAccounts', params).then(json => {
        if (json && json.listaccountsresponse && json.listaccountsresponse.account) {
          this.accounts = [{ id: null, value: '' }, ...json.listaccountsresponse.account.map(x => {
            return {
              id: x.id,
              value: x.name
            }
          })]
        }
      })
    },
    getParams (page, pageSize) {
      const formRaw = toRaw(this.form)
      const values = this.handleRemoveFields(formRaw)
      var params = {
        page: page || this.page,
        pagesize: pageSize || this.pageSize
      }
      if (values.dateRange) {
        if (this.$store.getters.usebrowsertimezone) {
          params.startdate = dayjs.utc(dayjs(values.dateRange[0]).startOf('day')).format('YYYY-MM-DD HH:mm:ss')
          params.enddate = dayjs.utc(dayjs(values.dateRange[0]).endOf('day')).format('YYYY-MM-DD HH:mm:ss')
        } else {
          params.startdate = dayjs(values.dateRange[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')
          params.enddate = dayjs(values.dateRange[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
        }
      }
      if (values.domain) {
        params.domainid = this.domain.id
      }
      if (values.account) {
        params.accountid = this.account.id
      }
      if (values.type) {
        params.type = this.usageType.id
      }
      if (values.isRecursive) {
        params.isrecursive = true
      }
      if (values.id) {
        params.usageid = values.id
      }
      return params
    },
    listUsageRecords () {
      this.tableLoading = true
      this.loading = true
      var params = this.getParams()
      if (!(params.startdate && params.enddate)) {
        this.tableLoading = false
        this.loading = false
        return
      }
      getAPI('listUsageRecords', params).then(json => {
        if (json && json.listusagerecordsresponse) {
          this.usageRecords = json?.listusagerecordsresponse?.usagerecord || []
          this.totalUsageRecords = json?.listusagerecordsresponse?.count || 0
          let count = 1
          for (var record of this.usageRecords) {
            // Set id to ensure a unique value of rowKey to avoid duplicates
            record.id = count++
          }
        }
      }).catch(error => {
        this.$notifyError(error)
      }).finally(f => {
        this.tableLoading = false
        this.loading = false
      })
    },
    getUsageTypes () {
      if (!('listUsageTypes' in this.$store.getters.apis)) {
        return
      }

      getAPI('listUsageTypes').then(json => {
        if (json && json.listusagetypesresponse && json.listusagetypesresponse.usagetype) {
          this.usageTypes = [{ id: null, value: '' }, ...json.listusagetypesresponse.usagetype.map(x => {
            return {
              id: x.id,
              value: x.description
            }
          })]
          this.usageTypeMap = {}
          for (var usageType of this.usageTypes) {
            this.usageTypeMap[usageType.id] = usageType.value
          }
        }
      })
    },
    getTimeSince (date) {
      if (date === undefined || date === null) {
        return ''
      }
      return dayjs(date).fromNow()
    },
    updateSelectedColumns (key) {
      if (this.selectedColumnKeys.includes(key)) {
        this.selectedColumnKeys = this.selectedColumnKeys.filter(x => x !== key)
      } else {
        this.selectedColumnKeys.push(key)
      }
      this.updateColumns()
      if (!this.$store.getters.customColumns[this.$store.getters.userInfo.id]) {
        this.$store.getters.customColumns[this.$store.getters.userInfo.id] = {}
      }
      this.$store.getters.customColumns[this.$store.getters.userInfo.id][this.$route.path] = this.selectedColumnKeys
      this.$store.dispatch('SetCustomColumns', this.$store.getters.customColumns)
    },
    updateColumns () {
      this.columns = []
      for (var columnKey of this.columnKeys) {
        if (!this.selectedColumnKeys.includes(columnKey)) continue
        var title
        var dataIndex = columnKey
        var resizable = true
        switch (columnKey) {
          case 'templateid':
            title = this.$t('label.templatename')
            break
          case 'startdate':
            title = this.$t('label.start.date.and.time')
            break
          case 'enddate':
            title = this.$t('label.end.date.and.time')
            break
          case 'usageActions':
            title = this.$t('label.view')
            break
          case 'virtualmachinename':
            title = this.$t('label.virtualmachinename')
            dataIndex = 'name'
            break
          default:
            title = this.$t('label.' + String(columnKey).toLowerCase())
        }
        this.columns.push({
          key: columnKey,
          title: title,
          dataIndex: dataIndex,
          resizable: resizable
        })
      }
      this.columns.push({
        key: 'usageActions',
        title: this.$t('label.view'),
        dataIndex: 'usageActions',
        resizable: false
      })
      if (this.columns.length > 0) {
        this.columns[this.columns.length - 1].customFilterDropdown = true
      }
    },
    downloadRecords () {
      if (this.loading) return
      this.formRef.value.validate().then(() => {
        this.downloadModal = true
        this.downloadPercent = 0
        this.downloadStatus = 'active'
        this.loading = true
        var params = this.getParams(1, 0) // to get count
        getAPI('listUsageRecords', params).then(json => {
          if (Object.getOwnPropertyNames(json.listusagerecordsresponse).length === 0 || json.listusagerecordsresponse.count === 0) {
            this.$notifyError({
              response: { data: null },
              message: this.$t('label.no.usage.records')
            })
            this.loading = false
            this.downloadStatus = 'exception'
            this.downloadModal = false
          } else {
            var totalRecords = json.listusagerecordsresponse.count
            this.downloadTotalRecords = totalRecords
            var pageSize = 500
            var totalPages = Math.ceil(totalRecords / pageSize)
            var records = []
            var promises = []
            for (var i = 1; i <= totalPages; i++) {
              var p = this.fetchUsageRecords({ ...params, page: i, pagesize: pageSize }).then(data => {
                records = records.concat(data)
                this.downloadPercent = Math.round((records.length / totalRecords) * 100)
                this.downloadedRecords += records.length
              })
              promises.push(p)
            }
            return Promise.allSettled(promises).then(() => {
              this.downloadPercent = 100
              this.downloadStatus = 'success'
              this.downloadCsv(records, 'usage-records.csv')
              this.loading = false
              this.downloadModal = false
            }).catch(error => {
              this.$notifyError(error)
              this.loading = false
              this.downloadStatus = 'exception'
              this.downloadModal = false
            })
          }
        })
      }).catch(error => {
        this.formRef.value.scrollToField(error.errorFields[0].name)
      })
    },
    downloadCsv (records, filename) {
      var csv = toCsv({ keys: this.usageRecordKeys, data: records })
      const hiddenElement = document.createElement('a')
      hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv)
      hiddenElement.target = '_blank'
      hiddenElement.download = filename
      hiddenElement.click()
      hiddenElement.remove()
    },
    fetchUsageRecords (params) {
      return new Promise((resolve, reject) => {
        getAPI('listUsageRecords', params).then(json => {
          return resolve(json.listusagerecordsresponse.usagerecord)
        }).catch(error => {
          return reject(error)
        })
      })
    },
    getAllUsageRecordColumns () {
      getAPI('listApis', { name: 'listUsageRecords' }).then(json => {
        if (json && json.listapisresponse && json.listapisresponse.api) {
          var apiResponse = json.listapisresponse.api.filter(x => x.name === 'listUsageRecords')[0].response
          this.usageRecordKeys = []
          apiResponse.forEach(x => {
            if (x && x.name) {
              this.usageRecordKeys.push(x.name)
            }
          })
          this.usageRecordKeys.sort()
        }
      })
    },
    parseDates (date) {
      return this.$toLocaleDate(dayjs(date))
    },
    generateUsageRecords () {
      postAPI('generateUsageRecords').then(json => {
        this.$message.success(this.$t('label.usage.records.generated'))
      }).catch(error => {
        this.$notifyError(error)
      }).finally(f => {
        this.generateModal = false
      })
    },
    purgeUsageRecords () {
      var params = {
        interval: this.purgeDays
      }
      postAPI('removeRawUsageRecords', params).then(json => {
        this.$message.success(this.$t('label.purge.usage.records.success'))
      }).catch(error => {
        this.$message.error(this.$t('label.purge.usage.records.error') + ': ' + error.message)
      }).finally(f => {
        this.purgeModal = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.breadcrumb-card {
  margin-left: -24px;
  margin-right: -24px;
  margin-top: -16px;
  margin-bottom: 12px;
}
</style>
